<template>
  <div :style="extStyle">
    <!--状态栏-->
    <div class="status-bar" :style="{height:menuButtonInfo.top+'px',backgroundColor:statusBgColor}"></div>
    <!--导航栏-->
    <div class="navigation-bar" :style="{height:menuButtonInfo.height+'px',backgroundColor:menuButtonBgColor}">
<!--      <layout-icon @click="bindBack" class="left-icon" :wrap-bg="leftIconWrapBg" :plain="leftIconPlain" :wrap-padding="leftIconWrapPadding" :color="letfIconColor" :size="letfIconSize" type="icon-icon-arrow-left-copy"></layout-icon>-->
      <u-icon v-if="showLeftIcon" class="left-icon" :size="letfIconSize" name="arrow-left" @click="bindBack"></u-icon>
      <div class="title" :style="{lineHeight:menuButtonInfo.height+'px'}">{{pageTitle}}</div>
    </div>
  </div>
</template>

<script>

import { backFunc } from '@/common/fun'

import { componetMixin } from '@/mixins'
import UIcon from '@/uview-ui/components/u-icon/u-icon'

export default {
  name: 'layoutPageTitle',
  mixins: [componetMixin],
  components: { UIcon},
  props: {
    extStyle: {
      type: String,
      default: ''
    },
    showLeftIcon: {
      type: Boolean,
      default: false
    },
    leftIconWrapBg: {
      type: String,
      default: 'none'
    },
    leftIconPlain: {
      type: Boolean,
      default: true
    },
    leftIconWrapPadding: {
      type: String,
      default: '0rpx'
    },
    statusBgColor: {
      type: String,
      default: '#ffffff'
    },
    menuButtonBgColor: {
      type: String,
      default: '#ffffff'
    },
    pageTitle: {
      type: String,
      default: ''
    },
    letfIconSize: {
      type: Number,
      default: 44
    },
    letfIconColor: {
      type: String,
      default: '#666666'
    },
    // 代表是否emit左侧被点击事件
    letfFn: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  methods: {
    bindBack () {
      if (this.letfFn) this.$emit('clickLeft')
      if (!this.letfFn) backFunc()
    }
  },
  onReady () {

  }
}
</script>
<style lang="scss" scoped>
  .navigation-bar {
    position: relative;

    .left-icon {
      position: absolute;
      left: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }

    .title {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
</style>
